<template>
  <!--图标和数字的组合-->
  <div id="box">
    <img :src="require('../../public/imgs/icon/' + icon)" class="icon" alt="" @click="iconClick()">
    <div class="num">{{ num }}</div>
  </div>
</template>

<script>

import {setState} from "@/api/api";

export default {
  name: "SXQ-IconAndNum",
  props: ['icon', 'num', 'id', 'callback'],
  methods: {
    iconClick() {
      let state = {
        hitsState: null,
        collectState: null,
        likeState: null
      }

      state.collectState = this.icon.includes("collect") ? true : null
      state.likeState = this.icon.includes("thumbsUp") ? true : null

      setState({
        friendUpdatesId: this.id,
        ...state
      }).then(res => {
        if (res.body.code == 1) {
          // 刷新数据
          this.callback()
        } else {
          this.$Message.error("服务器崩溃")
        }
      })
    }
  }
}
</script>

<style scoped>
#box {
  display: inline;
  margin-left: 10px;
  margin-right: 10px;
}

.icon {
  cursor: pointer;
  width: 15px;
  margin-right: 5px;
  display: inline-block;
}

.num {
  color: #999;
  display: inline-block;
}
</style>